<template>
    <div class="user">
        <basic-container>
            <avue-crud
                :option="option"
                ref="crud"
                v-model="form"
                :page.sync="page"
                @on-load="getList"
                @size-change="sizeChange"
                @current-change="currentChange"
                :table-loading="listLoading"
                @search-change="handleFilter"
                @refresh-change="handleRefreshChange"
                @row-update="update"
                @row-save="create"
                :before-open="handleOpenBefore"
                :row-style="rowStyle"
                :data="list"
            >
                <template slot="menuLeft">
                    <el-button class="filter-item" @click="$refs.crud.rowAdd()" type="primary" icon="el-icon-edit">添加</el-button>
                </template>
                <template slot="username" slot-scope="scope">
                    <span>{{scope.row.username}}</span>
                </template>
                 <template slot="orgId" slot-scope="scope">
                    <span>{{scope.row.orgName}}</span>
                </template>
                <template slot="staffName" slot-scope="scope">
                    <span>{{scope.row.staffName}}</span>
                </template>
                <template slot="role" slot-scope="scope">
                    <span v-for="(role,index) in scope.row.roleList" :key="index">
                        <el-tag>{{role.roleName}}</el-tag>&nbsp;&nbsp;
                    </span>
                </template>
                <template slot="deptId" slot-scope="scope">{{scope.row.deptName}}</template>
                <template slot="lockFlag" slot-scope="scope">
                    <el-tag>{{scope.label}}</el-tag>
                </template>

                <template slot="operation" slot-scope="scope">
                    <el-button v-if="sys_user_add" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,scope.index)">编辑</el-button>
                    <el-button v-if="sys_user_del" type="text" icon="el-icon-delete" @click="deletes(scope.row,scope.index)">删除</el-button>
                </template>

                <template slot="orgIdForm" slot-scope="scope">
                    <org-select v-model="form.orgId" @select="queryOrg"></org-select>
                </template>
                <template slot="deptIdForm" slot-scope="scope">
                    <avue-input-tree v-model="form.deptId" placeholder="请选择所属部门" :node-click="getNodeData" :dic="treeDeptData" :props="defaultProps"></avue-input-tree>
                </template>
                <template slot="roleForm" slot-scope="scope">
                    <avue-select v-model="role" multiple placeholder="请选择角色" :dic="rolesOptions" :props="roleProps"></avue-select>
                </template>
            </avue-crud>
        </basic-container>
    </div>
</template>

<script>
import { addObj, delObj, fetchList, putObj } from '@/api/admin/user'
import { deptRoleList } from '@/api/admin/role'
import { fetchTree } from '@/api/admin/dept'
import { tableOption } from '@/const/crud/admin/user'
import { mapGetters } from 'vuex'

export default {
    name: 'table_user',
    data() {
        return {
            option: tableOption,
            treeDeptData: [],
            checkedKeys: [],
            roleProps: {
                label: 'roleName',
                value: 'roleId'
            },
            defaultProps: {
                label: 'name',
                value: 'id'
            },
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20, // 每页显示多少条,
                isAsc: false //是否倒序
            },
            list: [],
            listLoading: true,
            role: [],
            form: {},
            rolesOptions: []
        }
    },
    computed: {
        ...mapGetters(['permissions'])
    },
    watch: {
        role() {
            this.form.role = this.role
        }
    },
    created() {
        this.sys_user_add = this.permissions['sys_user_add']
        this.sys_user_edit = this.permissions['sys_user_edit']
        this.sys_user_del = this.permissions['sys_user_del']
    },
    methods: {
        queryOrg(item) {
            this.form.orgId = item.id
            this.form.orgName = item.name
            console.log(this.form)
        },
        getList(page, params) {
            this.listLoading = true
            fetchList(
                Object.assign(
                    {
                        current: page.currentPage,
                        size: page.pageSize
                    },
                    params
                )
            ).then(response => {
                this.list = response.data.data.records
                this.page.total = response.data.data.total
                this.listLoading = false
            })
        },
        getNodeData(data) {
            deptRoleList().then(response => {
                this.rolesOptions = response.data.data
            })
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize
        },
        currentChange(current) {
            this.page.currentPage = current
        },
        handleFilter(param, done) {
            this.page.currentPage = 1
            this.getList(this.page, param)
            done()
        },
        handleRefreshChange() {
            this.getList(this.page)
        },
        handleOpenBefore(show, type) {
            window.boxType = type
            // 查询部门树
            fetchTree().then(response => {
                this.treeDeptData = response.data.data
            })
            // 查询角色列表
            deptRoleList().then(response => {
                this.rolesOptions = response.data.data
            })
            // 若是编辑、查看回显角色名称
            if (['edit', 'views'].includes(type)) {
                this.role = []
                for (let i = 0; i < this.form.roleList.length; i++) {
                    this.role[i] = this.form.roleList[i].roleId
                }
            } else if (type === 'add') {
                // 若是添加角色列表设置为空
                this.role = []
            }
            show()
        },
        handleUpdate(row, index) {
            this.$refs.crud.rowEdit(row, index)
            this.form.password = undefined
        },
        create(row, done, loading) {
            console.log(this.form)
            // this.form.orgId = this.$store.state.data.globalOrg.id || -1
            // this.form.orgName = this.$store.state.data.globalOrg.name || '全部机构'

            addObj(this.form)
                .then(() => {
                    this.getList(this.page)
                    done()
                    this.$notify.success('创建成功')
                })
                .catch(() => {
                    loading()
                })
        },
        update(row, index, done, loading) {
            putObj(this.form)
                .then(() => {
                    this.getList(this.page)
                    done()
                    this.$notify.success('修改成功')
                })
                .catch(() => {
                    loading()
                })
        },
        deletes(row) {
            this.$confirm('此操作将永久删除该用户(用户名:' + row.username + '), 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delObj(row.userId)
                    .then(() => {
                        this.getList(this.page)
                        this.$notify.success('删除成功')
                    })
                    .catch(() => {
                        this.$notify.error('删除失败')
                    })
            })
        },
        rowStyle(column, index) {
            // 根据条件隐藏显示
        }
    }
}
</script>
